<template>
	<view class="app">
		<u-navbar title="小柚子" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="" style="margin-top: 100rpx;text-align: center;">
			<text
				style="background-color: #b6b6b6;border-radius: 10rpx;font-size: .8rem;color: whitesmoke;padding: 4rpx 10rpx;">2023-11-25&nbsp;15:00</text>
		</view>
		<view class="message" style="margin-top: 50rpx;display: flex;position: relative;">
			<view class="">
				<image src="../../static/img/头像 女孩.png" mode="" style="width: 86rpx;height: 86rpx;"></image>
			</view>
			<view class="f">
			</view>
			<view class="mm" style="margin-left: 28rpx;background-color: white;padding: 20rpx;border-radius: 18rpx;">
				<text style="color: #ff007f;">你好，新生儿\n</text>
				<text style="color: #888;font-size: .85rem;">祝贺宝宝出生啦，新妈妈是否有点手足无措呢？柚宝宝送您一份全面的新生儿护理宝典，轻松带娃不再难~</text>
				<view class=""
					style="margin-top: 18rpx;display: flex;justify-content: space-between;align-items: center;">
					<text style="font-size: .9rem">查看更多</text>
					<image src="../../static/img/向右1.png" mode="" style="width: 30rpx;height: 30rpx"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			rightClick() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="less">
	.app {
		background-color: var(--bgcolor);
		min-height: 100vh;
		padding: 20rpx;
	}

	.message {
		opacity: 0;
		transform: translateY(100rpx);
		animation: move 1s ease-in-out forwards;

		@keyframes move {
			100% {
				opacity: 1;
				transform: translateY(0);
			}
		}
	}

	.mm {
		&:active {
			background-color: whitesmoke !important;
		}
	}

	.f {
		width: 50rpx;
		height: 25rpx;
		background: conic-gradient(from 90deg at 50% 0, white 0, white 45deg, transparent 45.1deg);
		position: absolute;
		left: 96rpx;
		top: 50rpx;
		transform: rotate(225deg);
	}
</style>